<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1_使用jsx创建虚拟DOM</title>
</head>
<body>
    <div id="title"></div>

    <!-- 引入库：先引入核心库，再引入操作DOM的扩展库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 将jsx转为js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/babel">//必须写babel，因为默认js
        const VDOM = (              //此处不要写引号，因为不是字符串
            <h1>
                <span>Hello React</span>
            </h1>
        )
        ReactDOM.render(VDOM, document.getElementById('title'))

        const TDOM = document.getElementById('title')
        console.log('虚拟',VDOM);
        console.log('真实',TDOM);
    </script>
</body>
</html>